import React, {useState} from 'react'
import {
  View,
  Image,
  ImageSourcePropType,
  TextInput,
  ImageStyle,
  StyleSheet,
  ViewStyle,
  TextStyle,
  TouchableOpacity,
  Text,
} from 'react-native'
import {Division, RadiusButton, Toast} from 'components'
import {translateSize, commonStyle, definedColors} from 'styles'
import Loading from './loading'
import {getAuthorization, loginOut, operate, setLogin} from '../services/authorization'
import pos from '../api/pos'
import {navigateReplace} from '../services/navigation'
import assets from '../modules/assets'
import {signInStyle} from '../modules/styles'

export interface InputWithIconProps {
  icon: ImageSourcePropType
  placeholder?: string
  textContentType?: 'password' | 'none'
  style?: ViewStyle
  onChange: (value: string) => void
}

const InputWithIcon: React.FC<InputWithIconProps> = props => {
  const [value, setValue] = useState<string>()
  const [showPassword, setShowPassword] = useState<boolean>(false)

  return (
    <View style={[styles.container, props.style]}>
      <View style={[commonStyle.containerRow, styles.row]}>
        <Image source={props.icon} style={styles.icon} resizeMode="contain" />
        <TextInput
          style={styles.input}
          onChangeText={text => {
            setValue(text)
            props.onChange(text)
          }}
          secureTextEntry={props.textContentType === 'password' && !showPassword}
          textContentType={props.textContentType}
          value={value}
          placeholder={props.placeholder}
          placeholderTextColor="#767676"
        />
        {props.textContentType === 'password' && (
          <TouchableOpacity
            onPress={() => {
              setShowPassword(!showPassword)
            }}>
            <Image source={assets.images.icon_eye} style={signInStyle.eye} />
          </TouchableOpacity>
        )}
      </View>
      <Division />
    </View>
  )
}

interface InputWithIconStyle {
  container: ViewStyle
  row: ViewStyle
  icon: ImageStyle
  input: TextStyle
}

const styles = StyleSheet.create<InputWithIconStyle>({
  container: {
    flexDirection: 'column',
    width: '100%',
    paddingTop: translateSize(20),
    paddingBottom: translateSize(10),
  },
  row: {
    alignItems: 'center',
  },
  icon: {
    width: translateSize(40),
    height: translateSize(40),
    marginRight: translateSize(43),
  },
  input: {
    fontSize: translateSize(28),
    height: translateSize(60),
    padding: 0,
    width: '80%',
  },
})

export default InputWithIcon
